<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>全选/反选</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="selectAll"> 全选
        <div v-for="item in items">
          <input type="checkbox" v-model="selectedItems" :value="item.id"> {{ item.name }}
        </div>
        <button @click="invertSelection">反选</button>
      </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
      selectAll: false,
      selectedItems: [],
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // 添加更多项
      ]
    };
  },
       
  watch: {
    selectAll(value) {
      if (value) {
        this.selectedItems = this.items.map(item => item.id);
      } else {
        this.selectedItems = [];
      }
    }
  },
  methods: {
    invertSelection() {
      this.selectedItems = this.items.map(item => (this.selectedItems.includes(item.id) ? null : item.id)).filter(Boolean);
    }
  }
    });
</script>

</html>
<style>

</style>
